<template>
  <div class="home">
    <div>
      <van-swipe indicator-color="#0C34BA" :autoplay="3000">
        <van-swipe-item v-for="(item, index) in bannerData" :key="index">
          <div @click="viewProductDetail(item.pid)">
            <img :src="item.bannerImg" alt="" class="auto-img" />
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <div @click="goPersonal" class="personal-box">
      <van-nav-bar>
        <template #left>
          <div class="title-box">
            <div class="hello">{{ timeText }}</div>
            <div class="username-box">
              <div class="username" v-if="isLogin">{{ username }}</div>
              <div class="login-text" v-else @click="goLogin">登陆</div>
            </div>
          </div>
        </template>
        <template #right>
          <div class="img" v-if="isLogin">
            <img src="../assets/home_active.png" alt="" class="auto-img" />
          </div>
        </template>
      </van-nav-bar>
    </div>

    <div class="youhui-box">
      <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showList = true"
      />
      <!-- 优惠券列表 -->
      <van-popup
        v-model="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
    </div>

    <div class="hot-product">
      <div
        class="hot-product-item"
        v-for="(item, index) in hotProductData"
        :key="index"
        @click="viewProductDetail(item.pid)"
      >
        <Product :pro="item" />
      </div>
    </div>
  </div>
</template>

<script>
const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元",
};
import Product from "../components/Product.vue";
export default {
  name: "Home",

  components: {
    Product,
  },

  data() {
    return {
      bannerData: [],
      hotProductData: [],
      timeText: "",
      username: "",
      isLogin: false,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false,
    };
  },

  created() {
    this.getBannerData();
    this.getHotProduct();
    this.getCurrentTime();
    this.getUserInfo();
  },

  methods: {
    getBannerData() {
      this.axios({
        method: "get",
        url: "/banner",
      })
        .then((result) => {
          if (result.data.code === 300) {
            this.bannerData = result.data.result;
          }
        })
        .catch((err) => {
        });
    },

    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },

    viewProductDetail(pid) {
      this.$router.push({ name: "Detail", params: { pid } });
    },

    getHotProduct() {
      this.axios({
        method: "get",
        url: "/typeProducts",
        params: {
          key: "isHot",
          value: 1,
        },
      })
        .then((result) => {
          if (result.data.code === 500) {
            result.data.result.forEach((item) => {
              item.small_img = item.smallImg;
            });
            this.hotProductData = result.data.result;
          }
        })
        .catch((err) => {
        });
    },

    getCurrentTime() {
      let date = new Date();
      let hours = date.getHours();
      if (hours >= 19) {
        this.timeText = "晚上好";
      } else if (hours >= 15) {
        this.timeText = "下午好";
      } else if (hours >= 11) {
        this.timeText = "中午好";
      } else if (hours >= 7) {
        this.timeText = "上午好";
      } else {
        this.timeText = "凌晨好";
      }
    },

    getUserInfo() {
      this.axios({
        method: "get",
        url: "/findMy",
      })
        .then((result) => {
          if (result.data.code === "A001") {
            this.username = result.data.result[0].nickName;
            this.isLogin = true;
          }
        })
        .catch((err) => {
        });
    },

    goLogin() {
      this.$router.push({ name: "Login" });
    },

    goPersonal() {
      this.$router.push({ name: "Personal" });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  background-color: #eee;
  // padding-top: 46px;
  padding-bottom: 50px;
  /deep/ .van-icon.van-icon-volume-o.van-notice-bar__left-icon {
    color: #0c34ba;
  }
  /deep/ .van-icon.van-icon-arrow.van-notice-bar__right-icon {
    color: #0c34ba;
  }
  /deep/ .van-swipe-item {
    color: #0c34ba;
  }
  .notice-swipe {
    height: 40px;
    line-height: 40px;
  }
  
  .personal-box{
    border-radius: 10px;
    width: 95%;
    margin: -10px auto 0;
  } 
  /deep/ .van-nav-bar.van-hairline--bottom{
    border-radius: 10px;
  }
  .img {
    width: 46px;
    height: 46px;
    cursor: pointer;
  }
  .youhui-box{
    width: 95%;
    margin: 0 auto;
  }
  /deep/ .van-nav-bar__content {
    background-color: #2f3033;
    border-radius: 10px;
  }
  .auto-img {
    width: 100%;
    height: 100%;
  }
  .hot-product {
    margin: 10px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
  }

  .hot-product-item {
    width: calc(100%);
    margin-bottom: 10px;
    margin-right: 10px;
  }

  /deep/ .van-nav-bar__right {
    // width: 100%;
    padding: 0;
  }

  .title-box {
    display: flex;
    font-size: 14px;
    align-items: center;
  }
  .hello {
    margin-right: 10px;
    color: #ceae77;
  }
  .username {
    font-weight: bold;
    color: #ceae77;
    font-size: 18px;
  }
  .login-text {
    font-weight: bold;
  }
  /deep/ .img-box {
    width: calc(20%);
  }

  /deep/ .van-cell.van-cell--clickable.van-coupon-cell {
    border-radius: 10px;
    margin-top: 10px;
  }
}
</style>